<template>
    <section class="yuan_data intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="form" class=" origan-info-box" >
                <el-form-item >
                    <el-button type="primary"  @click="add">+ 新增</el-button>
                </el-form-item>
                <el-form-item >
                    <el-input  v-model="form.search" placeholder="请输入内容">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
                <span class="area-right">
                    <span 
                        @click="changeSort('isCreatDataIcon',$event)"
                        :class="form.sortTime==='asc'?'up':'down'"
                        class="button-yuan" 
                    >
                        <i class="el-icon-d-caret"></i>创建时间
                    </span>&nbsp;
                    <span
                        @click="changeSort('isNumIcon',$event)"
                        :class="form.sortNumber==='asc'?'up':'down'"
                        class="button-yuan" 
                    >
                        <i class="el-icon-d-caret"></i>引用数量
                    </span>
                </span>
            </el-form>
            <div></div>
            <el-row :gutter="1" class="data_manage">
                <el-col :span="1" class="data_item" v-for="(item,index) in dataManage" :key="index">
                    <p class="normal"><span class="font-color">字段名</span> <span class="font-color-blue">{{item.name }}</span></p>
                    <p class="normal"><span class="font-color">字段值</span> <span class="font-color-black">{{item.key}}</span></p>
                    <p class="normal"><span class="font-color">类型</span> <span class="font-color-black2">{{dataTypeType[item.dataType]}}</span></p>
                    <p class="normal"><span class="font-color">适用类型</span> <span class="font-color-black3">{{dataType[item.type]}}</span></p>
                    <p class="normal">
                        <span class="font-color"><i class="el-icon-date"></i> {{item.createDate}}</span>
                        <span class="font-color font-color-right"><i class="el-icon-view"></i> {{item.referenceNumber}}</span>
                    </p>
                    <div class="hover" >
                        <span @click="detail(item.id)">详情</span>
                        <span @click="updataDiy(item.id)">修改</span>
                        <span @click="del(item.id)">删除</span>
                    </div>
                </el-col>
                <p v-if="dataManage.length===0" style="text-align: center;">暂无数据</p>
            </el-row>
            <!-- 分页 -->
            <p style="margin-top: 20px;text-align: right;">
                <el-pagination
                    background=""
                    :current-page.sync="form.pageNum"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="form.pageSize"
                    :total="total"
                ></el-pagination>
            </p>
            <el-dialog
                :title="titleDiy"
                :visible.sync="dialogVisible1"
                width="50%"
                class="diy-dialog"
                :append-to-body="true"
                :before-close="handleClose"
            >
                <form-diy
                    @insertData="insertData"
                    @closeForm="closeForm"
                    :type="dialog1Type"
                    :content="currentPage"
                    :detail="detailData"
                    :resetFields="resetFields"
                ></form-diy>
            </el-dialog>
        </div>
    </section>
</template>

<script>
import formDiy from "../components/formDiy";
import {
    componentGetYuanData,
    componentGetYuanDataDeatil,
    componentDelYuanData,
    componentAddYuanData,
    componentUpdataYuanData
} from "../components/computedFuwuServer";
export default {
    components: {
        formDiy
    },
    data() {
        return {
            total:0,
            updataId: 0,
            pageNo:1,
            currentPage: "yuanData",
            titleDiy: "",
            dialog1Type: "",
            dialogVisible1: false,
            isCreatDataIcon: false /*创建时间的图标*/,
            isNumIcon: true /*引用数量的图标*/,
            form: {
                search: "",
                sortTime: "asc",
                sortNumber: "asc",
                pageNum: 1,
                pageSize: 15
            },
            detailData: {},
            dataManage: [],
            dataType: ["null", "采集类", "共享类"],
            dataTypeType: ["null","字符串","数值","Base64"],
            resetFields: false, //清除表单验证提示
        };
    },
    methods: {
        closeForm() {
            /*关闭弹窗*/
            this.dialogVisible1 = false;
        },
        changeSort(val, ev) {
            /*改变顺序*/
            if (val === "isCreatDataIcon") {
                this.form.sortTime = this.form.sortTime === "asc" ? "desc" : "asc";
            } else if (val === "isNumIcon") {
                this.form.sortNumber = this.form.sortNumber === "asc" ? "desc" : "asc";
            }
            this.search();
            setTimeout(()=>{
                console.log(this.dataManage);
            },80);
        },
        add() {
            this.updataId = 0;
            this.titleDiy = "新增元数据";
            this.dialog1Type = "add";
            this.dialogVisible1 = true;
        },
        detail(val) {
            /*打开详情*/
            componentGetYuanDataDeatil(this, { id: val });
            this.titleDiy = "详情页面";
            this.dialog1Type = "detail";
            this.dialogVisible1 = true;
        },
        updataDiy(val) {
            this.resetFields = !this.resetFields;
            /*打开修改*/
            componentGetYuanDataDeatil(this, { id: val });
            this.updataId = val;
            this.titleDiy = "修改元数据";
            // this.dialog1Type = 'add';
            this.dialog1Type = "update";
            this.dialogVisible1 = true;

        },
        del(val) {
            /*删除元数据*/
            componentDelYuanData(this, { id: val });
        },
        search() {
            /*搜索*/
            componentGetYuanData(this, this.form);
        },
        insertData(param) {
            /*插入元数据,更新元数据*/
            this.updataId === 0
            ? componentAddYuanData(this, param)
            : componentUpdataYuanData(this, { id: this.updataId }, param);
            this.closeForm();
        },
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.search();
        },
        handleClose(done){
            done();
            this.resetFields = !this.resetFields;
        }
    },
    mounted() {
        this.search();
        setTimeout(()=>{
            console.log(this.dataManage);
        },80);
    }
};
</script>

<style scoped>
    .yuan_data .form1 {
      margin: 10px;
      border-bottom: dashed 1px #a7a4a4;
      padding-bottom: 25px;
    }
    .yuan_data .sort {
      text-align: right;
    }
    .yuan_data .up .el-icon-back {
      transform: rotate(90deg);
    }
    .yuan_data .down .el-icon-back {
      transform: rotate(-90deg);
    }
    .yuan_data .data_manage {
    }
    .yuan_data .data_item {
      height: 150px;
      background: #fff;
      /* max-width: 231px; */
      width: 10%;
      margin: 0 15px;
      min-width: 180px;
      max-width: 200px;
      padding-left: unset !important;
      padding-right: unset !important;
      border: solid 1px #c1c1c1;
      box-sizing: content-box;
      margin-top: 20px;
      padding-top: 10px;
    }
    .yuan_data .data_item p {
      height: 27px;
      background: #fff;
      text-align: left;
      line-height: 27px;
      font-size: 12px;
      color: #000000;
      margin-left: 10px;
    }
    .yuan_data .data_item p .font-color{
        color: #666;
    }
    .yuan_data .data_item p .font-color-right{
        float: right;
        margin-right: 5px;
    }
    .yuan_data .data_item p .font-color-blue{
        color: blue;
        margin-left:20px;
    }
    .yuan_data .data_item p .font-color-black{
        margin-left:20px;
    }
    .yuan_data .data_item p .font-color-black2{
        margin-left:32px;
    }
    .yuan_data .data_item p .font-color-black3{
        margin-left:7px;
    }
    .yuan_data .data_item p.first_p {
      background: #85beeb;
      color: #fff;
    }
    .hover {
      display: none;
    }

    .hover span {
      display: inline-block;
      background: #469ff8;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      border-radius: 50px;
      margin-left: 24%;
      margin-top:13px;
      position: relative;
    }
    .data_item:hover .hover {
      display: block;
      background: #fff;
      height: 150px;
      
    }
    .data_item:hover {
      height: 150px;

    }
    .data_item:hover .normal {
      display: none;
    }
    .area-right{
        float: right;
        line-height: 40px;
    }
    .button-yuan{
        cursor: pointer;
    }
    @keyframes dialog-fade-in {
      0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @keyframes dialog-fade-out {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }
</style>